<template>
  <div class="footer">
    <div class="footerTop">
      <div class="content">
        <h6>购物指南</h6>
        <ul>
          <li>免息分期</li>
          <li>以旧换新</li>
          <li>众测活动</li>
          <li>企业购</li>
          <li>O2O采购</li>
        </ul>
      </div>
      <div class="content">
        <h6>售后服务</h6>
        <ul>
          <li>门店维修</li>
          <li>保修政策</li>
          <li>防伪查询</li>
          <li>退换货政策</li>
          <li>手机寄修服务</li>
          <li>维修备件价格查询</li>
        </ul>
      </div>
      <div class="content">
        <h6>维修与技术支持</h6>
        <ul>
          <li>服务店</li>
          <li>预约维修</li>
          <li>手机寄修</li>
          <li>备件价格查询</li>
          <li>上门服务</li>
        </ul>
      </div>
      <div class="content">
        <h6>特色服务</h6>
        <ul>
          <li>防伪查询</li>
          <li>补购保障</li>
          <li>以旧换新</li>
          <li>礼品包装</li>
        </ul>
      </div>
      <div class="content">
        <h6>关于我们</h6>
        <ul>
          <li>公司介绍</li>
          <li>华为零售店</li>
          <li>商家中心</li>
          <li>意见反馈</li>
        </ul>
      </div>
      <div class="content">
        <h6>友情链接</h6>
        <ul>
          <li>华为集团</li>
          <li>消费者业务</li>
          <li>华为云</li>
          <li>应用市场</li>
          <li>心声社区</li>
        </ul>
      </div>
      <div class="right">
          <p>950803</p>
          <p>7x24小时客服热线（仅收市话费）</p>
          <p><a href=""><i class="el-icon-service"></i> 在线客服</a></p>
          
          <div class="rightBottom">
            <h5>关注VWALL:
              <i class="iconfont icon-weixin"></i>
              <i class="iconfont icon-toutiaoyangshi"></i>
              <i class="iconfont icon-xinlangweibo"></i>
              <i class="iconfont icon-baidu"></i>
            </h5>
          </div>
      </div>
    </div>
    <div class="footerBottom">
      <div class="left"><img src="../logo_app.png" alt=""></div>
      <div class="right">
        <ul>
          <li>隐私声明</li>
          <li>服务协议</li>
          <li>COOKIES</li>
          <li>Copyright</li>
          <li>@2012-2022 华为终端有限公司</li>
          <li>版权所有 </li>
          <li>| 经营资质 |</li>
          <li><a href="https://beian.miit.gov.cn/" target="_blank"> 粤ICP备19015064号</a></li>
          <li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44190002003939" target="_blank">粤公网安备 44190002003939号</a></li>
        </ul>
        <div class="content">
          <span>增值电信业务经营许可证：粤B2-20190762 |</span>
          <a target="_blank" href="https://wxdxsba.miit.gov.cn/serviceAction.action">备案主体编号：44201919072182</a>
          <a target="_blank" href="https://res.vmallres.com/pimages//pages/cdnImages/91133651365615633119.pdf">粤新出网备（2021）2号<em>|</em></a>
          <a target="_blank" href="https://res.vmallres.com/pimages//pages/cdnImages/58220651365615602285.png">（粤）网械平台备字[2022]第00005号<br></a>
        </div>
       <div class="content">
        <a target="_blank" href="https://res.vmallres.com/pimages//pages/cdnImages/17308188080618180371.jpg">互联网药品信息服务资格证（粤）-非经营性-2020-0102</a>
        <a target="_blank" href="https://res.vmallres.com/pimages//pages/cdnImages/29005784435618750092.pdf">粤东食药监械经营备20203930</a>
        <a target="_blank" href="https://res.vmallres.com/pimages//pages/cdnImages/29005784435618750092.pdf">粤东食药监械经营备20203930</a>
       </div>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavFooter"
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}
.footer {
  width: 100%;
  height: vw(462);
  padding: vw(24) 0;
.footerTop{
  width: vw(1200);
  margin: 0 auto;
  padding: vw(24) 0;
  color: #00000080;
  display: flex;
  justify-content: space-between;
  .content{
    font-size: vw(12);
    h6{
      color: #000;
      font-size: vw(14);
      margin-bottom: vw(32);
    }
    li{
      margin-bottom: vw(10);
    }
  }
  .right{
    text-align: center;
    p:first-child{
      height: vw(36);
      font-weight: 700;
      color: #575757;
      font-size: vw(24);
    }
    p:nth-of-type(2){
      height: vw(22);
      color: #575757;
      font-size: vw(14);
      margin-bottom: vw(10);
    }
    p:nth-of-type(3){
      width: vw(160);
      height: vw(34);
      margin: 0 auto;
      background-color: #333;
      border-radius: vw(34);
      a{
        font-size: vw(14);
      line-height: vw(34);
      color: #fff;
      i{
        padding-right: vw(5);
        font-size: vw(17);
        color: #dbd6d6;
      }
    }
    }
    .rightBottom{
      margin-top: vw(20);
      h5{
        color: #333;
        font-size: vw(14);
      }
      i{
        // width: vw(16);
        // height: vw(16);
        color: rgb(77, 74, 74);
        font-size: vw(19);
        margin-right: vw(6);
      }
    }
  }
}
.footerBottom{
  width: vw(1200);
  margin: 0 auto;
  padding: vw(25) 0;
  display: flex;
  // justify-content: space-around;
  .left{
    margin-right: vw(40);
    img{
      width: vw(80);
    }
    
  }
  .right{
    ul{
      display: flex;
      li{
        color: #a4a4a4;
        font-size: vw(12);
        margin-right: vw(6);
        a{
          color: #a4a4a4;
        }
        &:hover{
          color: red;
        }
      }
    }
    .content{
      margin-top: vw(8);
      display: flex;
      color: #a4a4a4;
      font-size: vw(12);
      margin-right: vw(6);
      a{
          color: #a4a4a4;
          &:hover{
          color: red;
        }
        }
        span{
          &:hover{
          color: red;
        }
        }
        
       
    }
  }
}
}
</style>
